<template>
  <div id="app">

    <el-container>
      <el-header style="margin-top:12px">
        项目 
       <el-select 
       :change="changeApp()"
       v-model="appValue" placeholder="请选择">
    <el-option
      v-for="item in apps"
      :key="item.id"
      :label="item.appName"
      :value="item.appKey">
      <span style="float: left">{{ item.appName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.lang }}</span>
    </el-option>
   
  </el-select>
 <el-button @click="addApp" type="primary" plain icon="el-icon-plus"></el-button>
       <div style="float:right">
         <img
         class="avatar"
           src="http://www.yangqq.com/d/file/jstt/bj/2018-03-19/42d76eafa6495d9647a4fd245201f56c.jpg"/>
       </div>
    </el-header>
    
    </el-container>
 <el-container style="border: 1px solid #eee">
  <!-- <el-header></el-header> -->
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1','2','3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-goods"></i>应用管理</template>
         
          <el-menu-item index="1-1">
          <router-link to="ajax"> AJAX性能</router-link></el-menu-item> 
            <el-menu-item index="1-2">
          <router-link to="slowResources">慢资源跟踪</router-link></el-menu-item> 
            <el-menu-item index="1-3">
          <router-link to="ajax">接口性能</router-link></el-menu-item> 
            <el-menu-item index="1-4">
          <router-link to="page">访问页面</router-link></el-menu-item> 
           <el-menu-item index="1-5">
          <router-link to="userType">用户类型</router-link></el-menu-item> 
   <el-menu-item index="1-6">       <router-link to="log">日志</router-link></el-menu-item> 
    
        </el-menu-item>
      </el-submenu>
       
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-error"></i>错误监控</template>
        <el-menu-item index="2-1">
          <router-link to="errors"> 错误列表</router-link></el-menu-item> 
        
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>设置</template>
        <el-menu-item index="3-1">
       <router-link to="setting">项目设置</router-link>
          </el-menu-item> 
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
   
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
<el-dialog 
width="350px"
title="新建应用" :visible.sync="dialogFormVisible">
  <el-form :model="app">
    <el-form-item label="应用名称" :label-width="'80px'">
      <el-input v-model="app.appName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="应用类型" :label-width="'80px'">
      <el-select v-model="app.lang" placeholder="请选择类型">
        <el-option label="Vue" value="Vue"></el-option>
        <el-option label="JS" value="JS"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editAppInfo">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld";
import api from "./api";
import axios from "axios";
export default {
  name: "App",
  created() {
    this.getUserInfo();
    this.getApps();
    // axios.get
  },
  methods: {
    getUserInfo() {
      //  let token = localStorage.getItem("token");
      let userName = localStorage.getItem("userName");
      // if (token) {
      if (userName) {
        this.userName = userName;
      } else {
        api.getUser().then(res => {
          //  debugger
          this.userName = res.data.userName;
          localStorage.setItem("userName", this.userName);
        });
      }
      //}
    },
    changeApp(a, b) {
      this.$store.commit("SET_APPKEY", {
        appKey: this.appValue
      });
    },
    editAppInfo() {
      api.editAppInfo(this.app).then(res => {
        this.dialogFormVisible = false;
      });
    },
    addApp() {
      this.dialogFormVisible = true;
    },
    getApps() {
      api.getApps().then(res => {
        //  console.log('11.then',res)
        if (res.data.length < 1) {
          this.dialogFormVisible = true;
          return false;
        }
        this.apps = res.data;
        this.appValue = this.apps[0] && this.apps[0].appKey;
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log("to");
    console.log(to);
    console.log(from);
    console.log(to);
  },
  data() {
    return {
      dialogFormVisible: false,
      apps: [],
      app: {
        appName: "",
        type: ""
      },
      appValue: ""
    };
  }
};
</script>

<style>
.avatar {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.el-menu-item a {
  color: #000;
  display: block;
  width: 140%;
  text-decoration: initial;
}
.el-menu-item.is-active a {
  color: #409eff;
}
</style>
